<template>
  <div>
    <van-nav-bar title="发布" />

    <van-form @submit="onSubmit">
  <van-field
    v-model="title"
    name="title"
    label="标题"
    placeholder="标题"
    :rules="[{ required: true, message: '请填写标题' }]"
  />
  <van-field
    v-model="cate_name"
    label="分类"
    placeholder="请选择分类"
    readonly
    @click="show=true"
  />
  <van-field
    v-model="content"
    name="content"
    label="内容"
    placeholder="内容"
    type="textarea"
    :rules="[{ required: true, message: '请填写内容' }]"
  />
  
  
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>

    <van-popup
  v-model="show"
  position="bottom"
  :style="{ height: '30%' }"
>
<van-picker
  title="请选择"
  show-toolbar
  :columns="columns"
  @confirm="onConfirm"
  @cancel="show=false"
  value-key="name"
/>
</van-popup>



    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="add-o" to="/publish">发表</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>

import { mapState } from "vuex";
export default {
  name:"publish",
  component:{
    
  },
  data() {
    return {
      active:"2",
      title:'',
      content:'',
      cate_id:'',
      cate_name:'',
      imageSrc:[],
      columns: this.cate,
      show:false,
    }
  },
  computed:{
    ...mapState['cate']
  },
  created(){
    this.$store.dispatch('getcate')
  },
  methods: {
     onSubmit(values) {
      console.log('submit', values);
    },
    onConfirm(e){
      console.log(e);
      this.show=false
      this.cate_name=e
    },
    onCancel(){

    },
    fabu() {
      this.$http.post("/api/add_article").then((res) => {
        console.log(res);
        
      });
  },
  }
};
</script>

<style lang="less" scoped>

</style>